<template>
    <div id="inviteList">
        <navbar :title="title"></navbar>
        <scroll class="more-list"  ref="scroll" 
            :data="list" 
            :scrollY="scrollY" 
            :scrollX="scrollX"
            :bounce="bounce" 
            :pullup="pullup" 
            @scrollToEnd="_getMoreList">
            <div class="box">
                <span class="txt">已成功召集{{total}}人</span>
            </div>
            <div class="container"  v-if="list.length">
                <h3>召集记录</h3>
                <div class="list" v-for="(item,index) in list" :key=index>
                    <span class="time">{{item.reg_time | filtertimestamp}}</span>
                    <span class="name">{{item.username}}</span>
                </div>
            </div>
            <!-- 没有数据 -->
            <noData  :title="'暂无邀请记录'" v-else></noData>
        </scroll>
            <!-- 下拉加载显示 -->
        <div class="loadlist" v-show="list.length">
            <loadinglist :row="row"  :more="more"></loadinglist>
        </div>
        <!-- 初始化页面加载动画 -->
        <div class="loading-wrap" v-show="showLoading">
            <loading></loading>
        </div>
    </div>
</template>

<script>
    import navbar from 'common/navbar'
    import {inviteList} from 'api/game_box'
    import {formatDate} from 'js/date'
    import Loading from "common/loading"
    import Loadinglist from "common/LoadingList"
    import Scroll from "common/scroll"
    import noData from "common/noData"
    export default {
        data(){
            return{
                title:'邀请列表',
                page:1,
                total:0,
                list:[],
                isload: false, //是否正在加载
                scrollY: true,  //垂直滚动
                scrollX: false, //水平滚动
                pullup: true,   //上拉加载
                beforeScroll: true,
                bounce: false,  //动画
                more:true,      //下拉加载是否还有更多
                showLoading:true,
                row: true,     //loading文字水平显示
            }
        },
        created(){
            inviteList(this.page).then(res=>{
                 if (res.data.error == 0) {
                    this.showLoading=false;
                    let totalPage=res.data.content.totalPage;
                    this.list=res.data.content.data;
                    this.total= res.data.content.total;
                    if(this.page==totalPage){
                        this.more = false;
                        this.isload = true;
                    }
                 }else{
                    this.showLoading=false;
                    this.more = false;
                    this.isload=true;
                 }
            })
        },
        methods:{
            _getMoreList(){
                if (this.isload == true) {
                    return;
                }
                this.page++;
                this.isload = true;
                inviteList(this.page).then(res=>{
                    if (res.data.error == 0) {
                            let totalPage=res.data.content.totalPage;
                            res = res.data.content.data;
                            this.isload = false;
                            this.list = this.list.concat(res);
                            if(this.page==totalPage){
                            this.more = false;
                            this.isload = true;
                        }
                    }
                })
            }
        },
        filters:{
             filtertimestamp(time){
                let date = new Date(time*1000);
                return formatDate(date, 'yyyy-MM-dd hh:mm');
            } 
        },
        components:{
            navbar,
            Scroll,
            Loading,
            Loadinglist,
            noData
        }
    }
</script>

<style scoped lang="scss">
@import '~styles/variable.scss';
@import '~styles/mixins.scss';
.box{
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:3.8rem;
    background-size:100% 100%;
    background-image:url('../../assets/image/userGirl_bg.png');
    .txt{
        color:#fff;
        font-size:0.36rem;
    }
}
.container{
    padding:0.4rem 0;
    h3{
        font-size:$font-size-l;
        padding:0 0.36rem;
    }
    .list{
        height:1.1rem;
        line-height:1.1rem;
        padding:0 0.8rem 0 0.36rem;
        border-bottom:1px solid #cecdd2;
        font-size:$font-size-m;
        display:flex;
        justify-content: space-between;
        .name{
            color:#b3b3b3;
        }
    }
}
</style>